<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>阿里校招笔试</title>
  <style media="screen">
    .del{
      padding: 10px;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li>  %%%%%%%%%  第一行<span class="del">x</span></li>
    <li>  %%%%%%%%%  第二行<span class="del">x</span></li>
    <li>  %%%%%%%%%  第三行<span class="del">x</span></li>
    <li>  %%%%%%%%%  第四行<span class="del">x</span></li>
    <li>  %%%%%%%%%  第五行<span class="del">x</span></li>
  </ul>
  <ul class="list">
    <li>  *********  第一行<span class="del">x</span></li>
    <li>  *********  第二行<span class="del">x</span></li>
    <li>  *********  第三行<span class="del">x</span></li>
    <li>  *********  第四行<span class="del">x</span></li>
    <li>  *********  第五行<span class="del">x</span></li>
  </ul>
  <script type="text/javascript">
    class List {
        constructor (sel) {
            this.el = Array.from(document.querySelectorAll(sel));
            let self = this;
            this.el.forEach(item => {
                item.addEventListener('click', function (e) {
                    if (e.target.className.indexOf('del') > -1) {
                        self.removeItem.call(self, e.target);
                    }
                });
            });
        }
        removeItem (target) {
            let self = this;
            let findParent = function (node) {
                let parent = node.parentNode;
                let root = self.el.find(item => item === parent);
                if (root) {
                    root.removeChild(node);
                } else {
                    findParent(parent);
                }
            };
            findParent(target);
        }
    }

    window.addEventListener('DOMContentLoaded', function () {
        new List('.list');
    });
  </script>
</body>

</html>
